<template>
  <div class="afterManage-combination-page app-container">
    <div class="container">
      <div class="container-header">
        <div class="left">
          <div class="title">投资分类</div>
          <el-form
            ref="dateForm"
            :inline="true"
            label-width="80px"
            :model="dateForm"
          >
            <el-form-item label="" prop="classifyName">
              <el-input
                v-model="dateForm.classifyName"
                clearable
                placeholder="请输入分类名称"
                size="small"
                style="width: 260px;"
                @keyup.enter.native="searchList"
              ></el-input>
            </el-form-item>
            <el-form-item label="" prop="compositionName">
              <el-input
                v-model="dateForm.compositionName"
                clearable
                placeholder="请输入所属组合"
                size="small"
                style="width: 260px;"
                @keyup.enter.native="searchList"
              ></el-input>
            </el-form-item>
            <el-form-item style="margin-left: 20px;">
              <el-button size="small" class="bg-green" @click="searchList">
                查询
              </el-button>
              <el-button size="small" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        stripe
        fit
        size="mini"
        @row-click="submitHandle"
        @sort-change="sortCchange"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :header-cell-style="{ color: '#333' }"
        style="width: 100%;"
      >
        <el-table-column
          prop="classifyId"
          label="编号"
          align="left"
          width="80"
          fixed
          sortable="custom"
        ></el-table-column>
        <el-table-column
          prop="classfyName"
          sortable="custom"
          label="分类名称"
          min-width="150"
          fixed
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <span
              v-if="row.hasNetWorth"
              style="color: rgb(79, 149, 221); cursor: pointer;"
              @click="detailsHandle(row)"
            >
              {{ row && row.classfyName }}
            </span>
            <span
              v-else
              style="color: #999; cursor: pointer;"
              @click="$message('该投资或子投资下无净值')"
            >
              {{ row && row.classfyName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          sortable="custom"
          prop="compositionName"
          label="所属组合"
          width="130"
        ></el-table-column>
        <el-table-column
          sortable="custom"
          prop="netWorthTime"
          label="净值日期"
          min-width="100"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="{ row }">
            {{ row.netWorthTime | parseTime }}
          </template>
        </el-table-column>
        <el-table-column
          sortable="custom"
          prop="netWorthValue"
          label="单位净值"
          align="center"
          min-width="100"
        ></el-table-column>
        <el-table-column
          sortable="custom"
          prop="netWorthValue"
          label="累计净值"
          align="center"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="virNetworth"
          label="虚拟净值"
          width="130"
          align="center"
          sortable="custom"
        ></el-table-column>
        <el-table-column
          sortable="custom"
          prop="initMoney"
          label="资产金额(万元)"
          align="center"
          min-width="140"
        ></el-table-column>
        <el-table-column
          sortable="custom"
          prop="investManageShare"
          label="资产份额(份)"
          align="center"
          min-width="130"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          sortable="custom"
          prop="incomeRate"
          label="收益率"
          align="center"
          min-width="90"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.incomeRate || scope.row.incomeRate == 0"
              :class="scope.row.incomeRate >= 0 ? 'positiveFc' : 'negativeFc'"
            >
              {{ scope.row.incomeRate }}%
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          sortable="custom"
          prop="incomeRateToday"
          label="当日收益率"
          align="center"
          min-width="120"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.incomeRateToday || scope.row.incomeRateToday == 0"
              :class="
                scope.row.incomeRateToday >= 0 ? 'positiveFc' : 'negativeFc'
              "
            >
              {{ scope.row.incomeRateToday }}%
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          sortable="custom"
          prop="incomeRateThisWeek"
          label="近1周收益率"
          align="center"
          min-width="125"
        >
          <template slot-scope="{ row }">
            <span
              v-if="row.incomeRateThisWeek || row.incomeRateThisWeek == 0"
              :class="row.incomeRateThisWeek >= 0 ? 'positiveFc' : 'negativeFc'"
            >
              {{ row.incomeRateThisWeek }}%
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          sortable="custom"
          prop="incomeRateMonth"
          label="近1月收益率"
          align="center"
          min-width="130"
        >
          <template slot-scope="{ row }">
            <span
              v-if="row.incomeRateMonth || row.incomeRateMonth == 0"
              :class="row.incomeRateMonth >= 0 ? 'positiveFc' : 'negativeFc'"
            >
              {{ row.incomeRateMonth }}%
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          sortable="custom"
          prop="incomeRateHalfYear"
          label="近6月收益率"
          align="center"
          min-width="130"
        >
          <template slot-scope="{ row }">
            <span
              v-if="row.incomeRateHalfYear || row.incomeRateHalfYear == 0"
              :class="row.incomeRateHalfYear >= 0 ? 'positiveFc' : 'negativeFc'"
            >
              {{ row.incomeRateHalfYear }}%
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          sortable="custom"
          prop="incomeRateYear"
          label="近1年收益率"
          align="center"
          min-width="130"
        >
          <template slot-scope="{ row }">
            <span
              v-if="row.incomeRateYear || row.incomeRateYear == 0"
              :class="row.incomeRateYear >= 0 ? 'positiveFc' : 'negativeFc'"
            >
              {{ row.incomeRateYear }}%
            </span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          sortable="custom"
          prop="createdTime"
          label="创建日期"
          min-width="100"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          v-if="!isOpen"
          label="操作"
          width="114"
          align="center"
          fixed="right"
        >
          <template slot-scope="{ row }">
            <el-button
              class="filter-item"
              size="mini"
              icon="el-icon-connection"
              @click="goAfterInvestHandle(row)"
            >
              下属投资
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.pageCurrent"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  findAllManageClassifys,
  //  delInvest
} from '@/api/afterInvest'
import Pagination from '@/components/Pagination'
import { rmoney } from '@/utils'
import { debounce } from '@/utils/validate'
export default {
  name: 'AfterManageinvestType',
  components: {
    Pagination,
  },
  props: {
    isOpen: {
      type: Boolean,
      defaultL: false,
    },
  },
  data() {
    return {
      listLoading: false,
      dateForm: {
        classifyName: '',
        compositionName: '',
      },
      total: 0,
      list: [],
      listQuery: {
        pageCurrent: 1,
        limit: 20,
      },
      investManageType: 1,
      orderInfo: {}, //排序
      rmoney: Function,
    }
  },
  computed: {
    ...mapGetters(['userId']),
  },
  created() {
    this.rmoney = rmoney
    this.getList()
  },
  methods: {
    detailsHandle(row) {
      this.$router.push({
        path: `/afterManage/investType/details/${row.classifyId}`,
      })
    },
    goAfterInvestHandle(row) {
      this.$router.push({
        path: '/afterManage/investList',
        query: {
          classifyId: row.classifyId,
        },
      })
    },
    sortCchange(column) {
      if (!column.order) {
        this.orderInfo = {}
      } else {
        this.orderInfo = {
          [column.prop]: column.order == 'ascending' ? 'asc' : 'desc',
        }
      }
      debounce(this.getList, 300)()
    },
    submitHandle(row) {
      this.$emit('selctCombination', {
        groupId: row.groupId,
        groupName: row.groupName,
      })
    },
    // deleteHandle(row) {
    //   this.$confirm(`确认删除分组名称【${row.investName}】此条数据？`, '提示', {
    //     type: 'warning',
    //   })
    //     .then((_) => {
    //       delInvest({
    //         investId: row.investId,
    //         userId: this.userId,
    //       }).then((res) => {
    //         if (res.code === 0) {
    //           this.$notify({
    //             message: res.msg,
    //             type: 'success',
    //             duration: 2000,
    //           })
    //           this.getList()
    //         }
    //       })
    //     })
    //     .catch((_) => {})
    // },
    resetForm() {
      this.$refs.dateForm.resetFields()
      debounce(this.getList, 300)()
    },
    searchList() {
      this.listQuery.pageCurrent = 1
      debounce(this.getList, 300)()
    },
    getList() {
      this.listLoading = true
      findAllManageClassifys({
        ...this.dateForm,
        ...this.listQuery,
        orderByInfo: this.orderInfo,
        investManageType: this.investManageType,
        userId: this.userId,
      }).then((res) => {
        console.log('分类列表：', res)
        this.listLoading = false
        this.list = res.body.list
        this.total = res.body.total
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.app-container {
  .operationMore {
    padding-left: 10px;
    font-weight: bold;
    cursor: pointer;
  }
  .summation {
    font-size: 14px;
    text-align: right;
    padding: 14px 0;
  }
}
</style>
